// import React from "react";
// 直接解构出来，下面就不用react.了
// 所有react. 的都可以在这里解构出来
import React,{Component} from "react";
import Content from "./Content";

// 函数组件，在16.8.0之前，函数组件也叫作UI组件或者木偶组件
const Header=(props)=>{
  console.log(props);//传入形参
  return <header>页面标题{props.title},这是{props.level}级标题</header>
}

  // 循环渲染
  // const Content=(props)=>{
  //   return( 
  //         <div>
  //             <Header title='标题内容' level='2'/>
  //             {/* react元素放在一个数值中，依然正常渲染  */}
  //             {/* {[<li>内容1</li>,<li>内容2</li>]} */}
  //             <ul>
  //                 {/* <li>内容[1,2]</li>//内容[1,2]
  //                 <li>内容{[1,2]}</li>//内容12
  //                 <li>内容</li>
  //                 <li>内容</li>
  //                 <li>内容</li> */}

  //                 {/* {props.data.map((item)=>{
  //                   return <li>{item}</li>
  //                 })} */}

  //                 {
  //                   // 箭头函数的简写
  //                                         // 通过key标识每一个li元素
  //                   props.data.map(item=><li key={item}>{item}</li>)
  //                 }
  //             </ul>
  //         </div>  
  //   )
          
  // }

/**
 * 如果想要展示什么内容，一定要声明成函数组件
 * 实现什么功能再定义类组件
 */

// 类组件
// class Content extends React.Component{
// impotr里解构出来了，下面直接写
// class Content extends Component{
      // constructor(){
      //   super();
      //   console.log(this.props);//undefined
      //   // 构造函数中声明状态，当前组件内的，自己私有的变量声明到状态里面
      //   this.state={
      //     // 设置变量，声明变量
      //     title:'列表标题',
      //     time:new Date().toLocaleTimeString()
          
      //   }
      //   // 设置使时间变化，使变量变化
      //   setInterval(()=>{
      //   // setState页面更新
      //     this.setState({time:new Date().toLocaleTimeString()})
      //   },1000)
      // }
      // constructor(props){
      //   super(props);
      //   // super加实参是为了在下面拿到this.props，一般不用加
      //   // console.log(this.props);
      //   // 构造函数中声明状态，当前组件内的，自己私有的变量声明到状态里面
      //   this.state={
      //     // 设置变量，声明变量
      //     title:'列表标题',
      //     time:new Date().toLocaleTimeString()
          
      //   }
      //   // 设置使时间变化，使变量变化
      //   setInterval(()=>{
      //     this.setState({time:new Date().toLocaleTimeString()})
      //   },1000)
      // }
//       // 挂载成功执行，且只执行一次
//       componentDidMount(){
//         // 如果放到这里，会每隔一秒开一个定时器，无限个定时器开启，卡死
//         setInterval(()=>{
//           this.setState({time:new Date().toLocaleTimeString()})
//         },1000)
//         console.log("didmount");
//       }
//       shouldComponentUpdate(){
//         console.log("shouldUpdate");
//         return true;//往后执行
//         // return false;//终止生命周期，不往后执行了
//       }
//       componentDidUpdate(){
//         console.log("didUpdate");
//       }
//       render(){
//         console.log("rendr");
//         // 只生成一个新的对象，不执行dom操作
//         return <div>
//           <Header title={this.state.title} level='2'/>
//           <div>{this.state.time}</div>
//           {/* 直接用了props，除了构造函数中无法直接拿到props，其它的都可以*/}
//           <div>{this.props.data}</div>
//         </div>
      // }
// }

/**
 * 生命周期是自己执行的，不是调用的
 */
function App(){
  return(
    <div className="APP">
      {/* 根组件里面加上Header组件 */}
      {/* 传入实参 */}
      <Header title='Rect' level='2'/>
      <Content data={['a','b','c']}/>
    </div>
  )
}

export default App;
